<html>
<head>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.jparallax.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('#parallax').jparallax({mouseActiveOutside: true});
	
	$("#p1").css({ opacity: 1 });
	$("#p2").css({ opacity: 0.8 });
	$("#p3").css({ opacity: 0.6 });
});
</script>
<link rel="stylesheet" type="text/css" href="css/public.css"></link>
<style>

#parallax
{position:relative; overflow:hidden; width:1000px; height:300px; background-color: #d8d8d8; background-image: url('images/allBg.png');}
</style>
<title>Parallax</title>
</head>

<body>

	<div id="mainContainer">
	
		<!-- 
		<div id="logoContainer">
			<img src="images/logoStrip.png" />
		</div>
		 -->
		 
		<div id="parallax">
			<div style="width: 1100px; height: 300px;" id="p1">
				<img src="images/typoBg.png" style="width: 1200px; height: 300px;" />
			</div>
			<div style="width: 1200px; height: 300px;" id="p3">
				<img src="images/typo3.png"
					style="width: 1000px; height: 300px; margin: 10px;" />
			</div>
			<div style="width: 1300px; height: 300px;" id="p2">
				<img src="images/typo2.png"
					style="width: 1100px; height: 300px; margin-left: 100px;" />
			</div>
			<div style="width: 1400px; height: 300px;" id="p1">
				<img src="images/typo1.png"
					style="width: 1200px; height: 300px; margin-left: 200px;" />
			</div>


		</div>
		<div id="divContent">
			<p style="text-align: center;">Coming soon...</p>
		</div>

	</div>
</body>
</html>
